<template>
  <div class="mychart">
    <van-cell :border="false">
      <div class="tag">
        <van-tag color="#eceaea" text-color="#545671" size="large">{{
          ChartObj.city
        }}</van-tag>
        <van-tag color="#eceaea" text-color="#545671" size="large">{{
          ChartObj.position
        }}</van-tag>
      </div>
      <!-- 进度条 -->
      <div class="chartData" v-for="(item, index) in ChartArr" :key="index">
        <span>{{ item.year }}</span>
        <diV class="progress">
          <div
            class="progress_in"
            :style="{ width: (item.salary / ChartObj.topSalary) * 100 + '%' }"
          >
            ￥{{ item.salary }}
          </div>
        </diV>
        <div class="percent">
          <i
            class="iconfont iconicon_shangsheng"
            style="color:#00d47a"
            v-if="item.percent > 0"
          ></i>
          <i
            v-else
            class="iconfont iconicon_xiajiang"
            style="color:#fe6d67"
          ></i>
          <span>{{ item.percent }}%</span>
        </div>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: ['ChartObj', 'ChartArr'],
  data () {
    return {
      width: '50%',
      isload: false
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.mychart {
  .tag {
    /deep/.van-tag {
      margin-right: 10px;
    }
  }
  .chartData {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .progress {
      flex: 1;
      background: #ccc;
      height: 12px;
      margin: 0 15px;
      border-radius: 6px;
      line-height: 12px;
      overflow: hidden;
      .progress_in {
        height: 12px;
        color: #fff;
        background: #fe6d67;
        text-align: right;
        box-sizing: border-box;
        padding-right: 5px;
      }
    }
    .percent {
      width: 50px;
    }
  }
}
</style>
